import React, {Component} from 'react'
import {Button, DatePicker, Form, Input, Table} from 'antd';
import moment from 'moment';
import {connect} from "react-redux";
import {removeEmptyField} from '../../compoent/emptyFild'
import {sc} from "../../../constant/consts";

const {RangePicker} = DatePicker;

class RecommendList extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [],
            pageNum: 1,
            pageSize: 10,
            startTime: '',
            endTime: '',
            visible: false,
            newValues: {},
            current:1

        };
        this.columns = [
            {
                title: '排序',
                dataIndex: 'sort',
            },
            {
                title: '用户名称',
                dataIndex: 'nickName',
            },
            {
                title: '真实姓名',
                dataIndex: 'realName',
            },

            {
                title: '手机号码',
                dataIndex: 'phone',
            },
            {
                title: '标签',
                dataIndex: 'label',
            },
            {
                title: '操作',
                render: (_, record) => {
                    return (
                        <div>
                            <a onClick={() => this.del(record)}
                                    style={{marginLeft: 5, color: 'red'}}>下架</a>
                        </div>
                    )
                }
            }
        ];

    }

    onFinish = (values) => {
        if (values.beginTme) {
            const beginTime = values.beginTme
            values.beginTme = moment(beginTime[0]).format('YYYY-MM-DD')
            values.endTime = moment(beginTime[1]).format('YYYY-MM-DD')
        }
        this.setState({current:1})
        if (values) {
            values.page = 1
            values.size = 10
            const newValues = removeEmptyField(values)
            this.setState({newValues})
            this.props.recommendList(newValues)
        } else {
            this.props.recommendList()
        }
    };

    onFinishFailed = (errorInfo) => {

    };

    componentDidMount() {
        this.init()
    }

    init = () => {
        this.props.recommendList({page: 1, size: 10})
    };

    query = (current, pageSize) => {
        const {newValues} = this.state;
        newValues.page = current;
        newValues.size = 10;
        this.setState({current});
        this.props.recommendList({...newValues})
    };

    handleCancel = () => {
        this.setState({
            visible: false,
        })

    };
    del = (record) => {
        const {current,newValues} = this.state
        newValues.page = current;
        this.props.delRecommend({id: record.id}).then(res => {
            this.props.recommendList(newValues)
        })
    };

    render() {
        const {recommendData} = this.props;
        const pagination = {
            current:Number(recommendData.current),//当前页
            total: recommendData.total,//总条数
            pageSize: recommendData.size,//页大小
            onChange: this.query,
            showQuickJumper: true,//快速跳转
            showSizeChanger: false//大于50时显示pageSize切换器
        };
        return (
            <div>
                <Form
                    name="basic"
                    initialValues={{remember: true}}
                    onFinish={this.onFinish}
                    onFinishFailed={this.onFinishFailed}
                    autoComplete="off"
                    layout='inline'
                >
                    <Form.Item
                        style={{width: 300}}
                        label="用户昵称："
                        name="nickName"
                    >
                        <Input placeholder='输入用户昵称'/>
                    </Form.Item>

                    <Form.Item
                        style={{width: 300}}
                        label="真实姓名："
                        name="realName"
                    >
                        <Input placeholder='输入用户昵称'/>
                    </Form.Item>

                    <Form.Item
                        label="时间："
                        name="beginTme"
                    >
                        <RangePicker
                            ranges={{
                                // Today: [moment(), moment()],
                                '本周': [moment().startOf('week'), moment().endOf('week')],
                                '本月': [moment().startOf('month'), moment().endOf('month')],
                            }}/>

                    </Form.Item>

                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="submit">
                            查询
                        </Button>
                    </Form.Item>
                    <Form.Item wrapperCol={{offset: 8, span: 16}}>
                        <Button type="primary" htmlType="reset">
                            重置
                        </Button>
                    </Form.Item>
                </Form>
                <Table columns={this.columns}
                       dataSource={recommendData.records}
                       rowKey={record => record.id}
                       pagination={pagination}
                       scroll={sc}
                />

            </div>
        );
    }
}

const mapState = state => ({
    ...state.users

});

const mapDispatch = dispatch => ({
    ...dispatch.users
})

export default connect(mapState, mapDispatch)(RecommendList);